<template>
  <div class="home">
    <div
      style="position: fixed; top: 0; left: 0; right: 0; height: 50px; background-color: #42b983; display: flex; justify-content: space-between; align-items: center; color: #fefefe;">
      <div style="margin: 0 10px;"><span style="font-size: 16px;">{{ name }}</span></div>
      <div style="margin: 0 10px;"><span style="font-size: 12px;">online users：{{ number }}</span></div>
    </div>

    <div
      style="position: fixed; top: 50px; left: 0; right: 0; bottom: 102px; background-color: #fefefe; overflow-y: scroll;"
      ref="messageView">
      <div v-for="(msg, idx) in messageList" :key="idx">

        <section style="text-align: left; margin: 10px 5px;" v-if="msg.name !== this.name">
          <div style="font-size: 14px; color: #42b983;">{{ msg.name }}</div>
          <span style="font-size: 16px; color: #333333; white-space: pre-wrap;">{{ msg.content }}</span>
        </section>

        <section style="text-align: right; margin: 10px 5px;" v-else>
          <div style="font-size: 14px; color: #42b983;">{{ msg.name }}</div>
          <div style="margin-right: 5px;">
            <span style="font-size: 16px; color: #333333; white-space: pre-wrap;">{{ msg.content }}</span>
          </div>
        </section>

      </div>
    </div>

    <div
      style="background-color: #eeeeee; width: 100vw; height: 2px; position: fixed; left: 0; right: 0; bottom: 100px;">
      &nbsp;
    </div>

    <div
      style="width: 100vw; position: fixed; left: 0; right: 0; bottom: 0; display: flex; background-color: #eeeeee;">
      <div style="height: 100px; flex-grow: 1; justify-content: center;">
        <textarea
          v-model="messageTextarea" placeholder="please input message" ref="messageTextarea"
          style="width: 96%; height: 90px; margin: 2px 0; border: none; resize: none; font-size: 14px;">asd</textarea>
      </div>
      <div style="width: 80px; flex-shrink: 0;">
        <div class="send-button" @click="doSendMessage"><span>SEND</span></div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import websockethttp from 'websockethttp/src/client/index'

export default {
  name: 'HomeView',
  data () {
    return {
      name: this.$route.query.name,
      number: 0,
      messageTextarea: 'Hello World\n',
      messageList: []
    }
  },
  mounted () {
    websockethttp.openConnection(`ws://websockethttp.hfl123.cn/server/websocket/http?name=${this.name}`, () => {
      console.log('connection_succeeded')

      setTimeout(() => {
        websockethttp.registerRequestHandlerFunction('Default', 'Default', (request, response) => {
          console.log('request', request)
          this.updateMessage(request)
        })
      }, 2000)

      setInterval(() => {
        websockethttp.sendBodyAndHeaderMessage('Number', 'Count', {}, '', (response) => {
          if (response.code === 0) {
            this.number = response.body
          } else {
            console.log('Number Count', response)
          }
        })
      }, 5000)

      this.$refs.messageTextarea.focus()
    })
  },
  methods: {
    doSendMessage: function () {
      if (this.messageTextarea.length <= 0) {
        alert('Can\'t send empty message!')
      } else {
        const header = {
          name: this.name,
          time: String(new Date().getTime())
        }
        websockethttp.sendBodyAndHeaderMessage('Default', 'Default', header, this.messageTextarea, (response) => {
          console.log('response', response)
          if (response.code === 0) {
            this.messageTextarea = ''
          }
        })
      }
    },
    updateMessage: function (request) {
      if (this.messageList.length >= 100) {
        this.messageList.splice(1, 1)
      }
      const message = {
        name: request.header.name || 'name',
        time: request.header.time,
        content: request.body
      }
      this.messageList.push(message)
      setTimeout(() => {
        this.$refs.messageView.scrollTop = this.$refs.messageView.scrollHeight
      }, 100)
      // this.$forceUpdate()
    }
  }
}
</script>

<style lang="scss">
.home {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  border: none;
}

.send-button {
  background-color: #42b983;
  height: 94px;
  margin: 2px 3px 2px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fefefe;

  &:active {
    background-color: #eeeeee;
    color: #42b983;
  }
}

input:focus, textarea:focus {
  outline: none;
}
</style>
